<template>
  <div>
    <h1>Playground</h1>
    <!--
      姓名
        非空
      年龄
        非空
  四要素：
      el-form
        :model :rules
      el-form-item
        prop
      input
        v-model
     -->
    <el-form :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    /**
     * 注意：必须要用箭头函数，函数里面的this指向才能指向data实例
     * 参数字段说明
     * rule - 用的不多，他表示我们校验哪个字段，字段信息类型之类
     * value - 用户输入的内容
     * callback -  必须被调用。 更多高级用法可参考 async-validator。
     *    不管校验成功还是失败 都要调用
     *    如果失败 - callback(new Error('错误信息'))
     *    如果成功 - callback() - 相当与校验成功
     *
     * 正则复习
       * \w word 字母数字下划线都可以
       * \d digital 数字
       * [] - 纵向 - 其中一个
       * {} - 横向 - 要几位
     */
    const validateAge = (rule, value, callback) => {
      console.log({ rule, value, callback })
      // 校验年龄必须是1-120岁
      if (/^[1-9]\d{0,2}$/.test(value) && value <= 120) {
        callback()
      } else {
        callback(new Error('要求1-120岁'))
      }
    }
    return {
      form: {
        name: '',
        age: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: ['change', 'blur'] }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: ['change', 'blur'] },
          // 自定义校验规则，在data中声明函数
          { validator: validateAge, trigger: ['change', 'blur'] }
        ]
      }
    }
  }
}
</script>

<style>

</style>
